<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            @if (badge(); as badgeToShow) {
                <h1>{{ badgeToShow.name }}</h1>
            } @else {
                <h1>{{ 'addon.badges.badgedetails' | translate }}</h1>
            }
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <ion-refresher slot="fixed" [disabled]="!loaded()" (ionRefresh)="refreshBadgeClass($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="loaded()" placeholderType="imageandboxes">
        @if (badge(); as badgeToShow) {
            <ion-item-group>
                <ion-item class="ion-text-wrap ion-text-center">
                    <ion-label>
                        @if (badgeToShow.image) {
                            <img class="large-avatar" [url]="badgeToShow.image" core-external-content [alt]="badgeToShow.name" />
                        }
                    </ion-label>
                </ion-item>
                @if (badgeToShow.name) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'core.name' | translate}}</p>
                            <p>{{ badgeToShow.name }}</p>
                        </ion-label>
                    </ion-item>
                }
                @if (badgeToShow.issuer) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
                            <p>
                                <core-format-text [text]="badgeToShow.issuer" contextLevel="system" [contextInstanceId]="0"
                                    [wsNotFiltered]="true" />
                            </p>
                        </ion-label>
                    </ion-item>
                }
                @if (badgeToShow.coursefullname) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'core.course' | translate}}</p>
                            <p>
                                <core-format-text [text]="badgeToShow.coursefullname" contextLevel="course"
                                    [contextInstanceId]="badgeToShow.courseid" />
                            </p>
                        </ion-label>
                    </ion-item>
                }
                @if (badgeToShow.description) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'core.description' | translate}}</p>
                            <p>{{ badgeToShow.description }}</p>
                        </ion-label>
                    </ion-item>
                }
            </ion-item-group>

            <!-- Competencies alignment -->
            @if (badgeToShow.alignment?.length) {
                <ion-item-group>
                    <ion-item-divider>
                        <ion-label>
                            <h2>{{ 'addon.badges.alignment' | translate}}</h2>
                        </ion-label>
                    </ion-item-divider>
                    <ion-item class="ion-text-wrap" *ngFor="let alignment of badgeToShow.alignment" [href]="alignment.targetUrl" core-link
                        [autoLogin]="false">
                        <ion-label>
                            <p class="item-heading">{{ alignment.targetName }}</p>
                        </ion-label>
                    </ion-item>
                </ion-item-group>
            }
        }
    </core-loading>
</ion-content>
